<template>
  <div :id="['menu' + idStr]" class="menu">
    <div
      v-for="(item, index) in data"
      :key="index"
      class="menu-item"
      @click="$emit('click', item)"
    >
      <span class="label">{{ item.label }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    idStr: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  name: "MenuList",
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.menu {
  border: 1px solid #999999;
  box-shadow: 0 0 10px 2px #999999;
  background-color: #ffffff;

  .menu-item {
    padding: 8px;
    cursor: pointer;

    .label {
      user-select: none;
    }

    &:hover {
      background-color: #e7f5fb;
    }
  }
}
</style>
